/**
 * Created by Scott on 2017/3/28.
 */

import React from 'react';
import { Layout, Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const {Header, Content, Sider} = Layout;
class MenuList extends React.Component {
    constructor ( props ) {
        super(props);
        this.state = {
            current: '1',
            openKeys: []
        };
        this.handleClick = this.handleClick.bind(this);
        this.onOpenChange = this.onOpenChange.bind(this);
        this.getAncestorKeys = this.getAncestorKeys.bind(this);
    }


    handleClick ( e ) {
        window.location.hash = e.key; // 被点击元素的‘key’的值‘about’就是页面跳转的路径
        console.log('Clicked: ', e);
        this.setState({current: e.key});
    };

    onOpenChange ( openKeys ) {
        const state = this.state;
        const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
        const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));

        let nextOpenKeys = [];
        if (latestOpenKey) {
            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
        }
        if (latestCloseKey) {
            nextOpenKeys = this.getAncestorKeys(latestCloseKey);
        }
        this.setState({openKeys: nextOpenKeys});
    };

    getAncestorKeys ( key ) {
        const map = {
            sub3: ['sub2']
        };
        return map[key] || [];
    };

    render () {
        return (
            <Menu
                mode="inline"
                openKeys={this.state.openKeys}
                selectedKeys={[this.state.current]}
                style={{ height: '100%' }}
                onOpenChange={this.onOpenChange}
                onClick={this.handleClick}
            >
                <SubMenu key="sub1" title={<span><Icon type="mail" /><span>系统管理</span></span>}>
                    <Menu.Item key="home">首页</Menu.Item>
                    <Menu.Item key="about">关于</Menu.Item>
                    <Menu.Item key="user">用户</Menu.Item>
                    <Menu.Item key="4">Option 4</Menu.Item>
                </SubMenu>
                <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                    <SubMenu key="sub3" title="Submenu">
                        <Menu.Item key="7">Option 7</Menu.Item>
                        <Menu.Item key="8">Option 8</Menu.Item>
                    </SubMenu>
                </SubMenu>
                <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
                    <Menu.Item key="9">Option 9</Menu.Item>
                    <Menu.Item key="10">Option 10</Menu.Item>
                    <Menu.Item key="11">Option 11</Menu.Item>
                    <Menu.Item key="12">Option 12</Menu.Item>
                </SubMenu>
            </Menu>
        );
    }
}

// 定义了要输出的类 SideBar （这个要用于路由配置中）
export default class SiderBar extends React.Component {
    render () {
        return (

            <Sider width={200} style={{ background: '#fff' }}>
                <MenuList location={this.props.location}/>
            </Sider>

        );
    }
};